import './header.css'
import logo from '../../assets/images/logo192.png'
import { NavLink, Routes, useLocation,useNavigate } from 'react-router-dom'

export default function Haeder() {
    let { state } = useLocation() || null
    let name = ''
    let headerImg = ''

    let showe = false

    if (state != null) {
        showe = true
        name = state.name
        headerImg = state.headerImg
    }

    const navigate = useNavigate()

    function logOut(){
        navigate('/home')
    }

    return (
        <div id='header'>
            <div className='container'>
                <ul>
                    <li><img src={logo} alt="xxxxxxx" /></li>
                    <li>最热电影</li>
                    <li>猜你最爱</li>
                    <li>电影生活</li>
                    <li>闲聊社区</li>
                </ul>

                {showe ?
                    <div>
                        <img src={require('../../../public/upload/' + headerImg)} alt="" />用户名：{name}<a onClick={logOut} className='logOut'>退出登录</a>
                    </div>
                    :
                    <div>
                        <NavLink to='/login'>登录</NavLink> ||<NavLink to='/register'>注册</NavLink>
                    </div>
                }
            </div>
        </div>
    )
}